import h from './mySnabbdom/h.js'
import patch from './mySnabbdom/patch.js'

const container = document.getElementById('container')
const btn = document.getElementById('btn')

const myVnode1 = h('ul', {}, [
  h('li', { key: 'A' }, 'A'),
  h('li', { key: 'B' }, 'B'),
  h('li', { key: 'C' }, 'C'),
  h('li', { key: 'D' }, 'D'),
  h('li', { key: 'E' }, 'E'),
])

const myVnode2 = h('ul', {}, [h('li', { key: 'C' }, 'CCCCC')])
const myVnode3 = h('ul', {}, [
  h('li', { key: 'B' }, 'B'),
  h('li', { key: 'C' }, 'C'),
  h('li', { key: 'Q' }, 'Q'),
  h('li', { key: 'E' }, 'E'),
  h('li', { key: 'D' }, 'D'),
  h('li', { key: 'A' }, 'A'),
])

patch(container, myVnode1)

btn.onclick = function () {
  patch(myVnode1, myVnode3)
}
